<template>
  <div id="FloorManage" class="page-wrapper">
    <div class="selector-wrapper main-card wrapper">
      <div class="main-card">
        <GroupSelector :selectorData="selectorData" />
      </div>
      <el-button type="primary" @click="handleSubmitClick">获取数据</el-button>
    </div>

    <h1 class="main-title"></h1>
    <div class="wrapper main-card">
      <div>
        <el-table :data="pageData" style="width: 100%">
          <el-table-column prop="goodsId" label="订单号"> </el-table-column>
          <el-table-column prop="number" label="房间号"> </el-table-column>
          <!-- <el-table-column prop="meterNumber" label="上次结余设备信息">
          </el-table-column>
          <el-table-column prop="meterNumber" label="上次结余设备金额">
          </el-table-column>
          <el-table-column prop="meterNumber" label="抄表时间">
          </el-table-column>
          <el-table-column prop="meterNumber" label="上次抄表时间">
          </el-table-column> -->
          <el-table-column prop="meterNumber" label="本次购买量">
          </el-table-column>
          <el-table-column prop="WxName" label="付款微信昵称">
          </el-table-column>
          <el-table-column prop="phone" label="付款人手机号"> </el-table-column>
          <el-table-column prop="merchant" label="操作员"> </el-table-column>
          <el-table-column prop="payGoods" label="支付订单号"></el-table-column>
          <el-table-column property="updatedAt" label="支付时间">
            <template slot-scope="scope">
              {{ formatDate(scope.row.updatedAt) }}
            </template></el-table-column
          >
          <el-table-column prop="money" label="缴纳金额"></el-table-column>
          <el-table-column
            prop="payNumber"
            label="账户现额度"
          ></el-table-column>
          <el-table-column prop="payState" label="支付状态">
            <template slot-scope="scope">
              <!-- 根据 payState 的值显示不同内容 -->
              <span v-if="scope.row.payState === 1">已支付</span>
              <span v-else-if="scope.row.payState === 0">未支付</span>
              <span v-else>其他状态</span>
              <!-- 可选：处理未定义的状态 -->
            </template>
          </el-table-column>
          <!-- <el-table-column  label="操作"></el-table-column> -->
        </el-table>
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GerRechargerecord } from '@/api/rechargerecord'
import GroupSelector from './components/GroupSelector'
export default {
  components: { GroupSelector },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',
      region: '',
      layer: '',
      formData: {},
      tableData: [],
      currentPage: 1,
      selectorData: {
        buildingId: null,
        floorId: null,
        roomId: null
      },
      pageData: [],
      total: '',
      pageSize: 10
    }
  },
  methods: {
    formatDate(isoString) {
      const date = new Date(isoString)
      const options = {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }
      return date.toLocaleString('zh-CN', options)
    },
    // 实现分页的方法
    queryByPage() {
      // 起始位置 = (当前页 - 1) x 每页的大小
      const start = (this.currentPage - 1) * this.pageSize
      // 结束位置 = 当前页 x 每页的大小
      const end = this.currentPage * this.pageSize

      return this.tableData.slice(start, end)
    },
    handleSizeChange(val) {
      this.pageSize = val

      this.pageData = this.queryByPage()
    },

    // 获取服务器数据
    fetchData() {
      // 数据接口
      GerRechargerecord().then(res => {
        this.total = res.data.rechargerecord.length
        console.log(res)
        if (res.success == true) {
          this.tableData = res.data.rechargerecord
          this.pageData = this.queryByPage()
        }
      })
    }
  },
  mounted() {
    this.fetchData()
  },
  handleSubmitClick() {}
}
</script>

<style lang="scss" scoped>
.wrapper {
  margin: 40px 0;
}

.selector-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 垂直居中 */
}

.list-wrapper {
  margin-top: 40px;
}

.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  /* Adjust margin as needed */
}
</style>
